<template>
    <el-sub-menu 
      v-if="item.children && item.children.length > 0" 
      :index="item.path"
    >
      <template #title>
        <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
        <span>{{ item.meta.title }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      />
    </el-sub-menu>
  
    <el-menu-item 
      v-else 
      :index="item.path"
      @click="handleClickLink(item)"
    >
      <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
      <template #title>
        {{ item.meta.title }}
      </template>
    </el-menu-item>
  </template>
  
  <script setup>
  // import { isExternal } from '@/utils/validate'
  
  const props = defineProps({
    item: {
      type: Object,
      required: true
    }
  })
  
  const handleClickLink = (item) => {
    if (isExternal(item.path)) {
      window.open(item.path)
    }
  }
  </script>
  